<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>QQ 音乐 首页 克隆（严格仿截图）</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    /* 基于你提供的截图，尽量复刻布局与样式（原创实现） */
    :root {
      --bg: #fafafa;
      --muted: #9aa5ad;
      --line: #ededed;
      --title: #333;
      --accent: #27ae60;
      --white: #fff;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Microsoft YaHei", "PingFang SC", Arial, Helvetica,
        sans-serif;
      background: var(--bg);
      color: var(--title);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* 顶栏 */
    header {
      height: 72px;
      border-bottom: 1px solid var(--line);
      background: var(--white);
      display: flex;
      align-items: center;
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding: 0 16px;
      width: 100%;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo svg {
      width: 48px;
      height: 48px;
    }

    .top-nav {
      margin-left: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .top-nav a {
      padding: 8px 12px;
      color: #666;
      font-size: 14px;
    }

    .top-nav a.active {
      background: var(--accent);
      color: #fff;
    }

    .search {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .search input {
      width: 320px;
      padding: 8px 10px;
      border: 1px solid var(--line);
    }

    .login {
      margin-left: 10px;
    }

    /* 次导航 */
    .subnav {
      background: var(--white);
      border-bottom: 1px solid var(--line);
    }

    .subwrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 8px 16px;
      display: flex;
      gap: 18px;
    }

    .subwrap a {
      color: #666;
      font-size: 13px;
    }

    /* 主体容器 */
    main {
      max-width: 1180px;
      margin: 18px auto;
      padding: 0 16px;
    }

    /* 标题居中 */
    .section-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 30px 0;
    }

    .section-title h2 {
      font-size: 26px;
      letter-spacing: 6px;
    }

    .section-title .tabs {
      margin-top: 12px;
      display: flex;
      gap: 14px;
      color: #333;
      font-size: 13px;
    }

    .section-title .tabs a {
      padding: 6px;
    }

    /* 歌单推荐轮播（固定展示5张） */
    .carousel {
      background: linear-gradient(#fafafa, #f5f5f5);
      padding: 18px;
    }

    .carousel-row {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      justify-content: center;
    }

    .card {
      width: 160px;
    }

    .cover {
      width: 160px;
      height: 160px;
      background: #eee;
      overflow: hidden;
      position: relative;
    }

    /* MV 模块样式 */
    .mv-section {
      margin-top: 40px;
      background: var(--white);
      padding: 20px;
      border: 1px solid var(--line);
    }

    .mv-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 14px;
    }

    .mv-card {
      display: flex;
      flex-direction: column;
    }

    .mv-cover {
      width: 100%;
      padding-top: 56.25%; /* 16:9 比例 */
      background: #ddd;
      position: relative;
      overflow: hidden;
    }

    .mv-cover img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .play-count {
      position: absolute;
      bottom: 6px;
      right: 6px;
      color: white;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 2px 6px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .mv-info {
      margin-top: 10px;
    }

    .mv-title {
      font-size: 14px;
      color: var(--title);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mv-artist {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card h4 {
      font-size: 13px;
      margin-top: 8px;
      color: #333;
    }

    .card p {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
    }

    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
    }

    .dot {
      width: 8px;
      height: 8px;
      background: #ddd;
      border-radius: 50%;
      cursor: pointer;
    }

    .dot.active {
      background: var(--accent);
    }

    /* 新歌首发（列表，三列） */
    .new-section {
      margin-top: 40px;
      background: var(--white);
      padding: 20px;
      border: 1px solid var(--line);
    }

    .new-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .play-all {
      border: 1px solid var(--line);
      padding: 8px 12px;
      background: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .play-all:hover {
      background-color: #f5f5f5;
    }

    .song-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .song-col {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .song-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 8px;
    }

    .song-row:hover {
      background: #fafafa;
    }

    .song-row img {
      width: 56px;
      height: 56px;
      object-fit: cover;
    }

    .song-meta {
      flex: 1;
    }

    .song-meta .title {
      font-size: 14px;
    }

    .song-meta .artist {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
    }

    .song-duration {
      width: 52px;
      text-align: right;
      color: var(--muted);
      font-size: 13px;
    }

    /* 精彩推荐 大卡片 */
    .recommend {
      margin-top: 40px;
    }

    .rec-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .rec-card {
      background: #fff;
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .rec-image {
      height: 160px;
      background: #ddd;
    }

    .rec-body {
      padding: 12px;
    }

    .rec-body h3 {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .rec-body p {
      font-size: 13px;
      color: var(--muted);
    }

    /* 通用分页小点 */
    .pager {
      display: flex;
      justify-content: center;
      margin-top: 14px;
      gap: 8px;
    }

    .mod_index_tab {
      height: 50px;
      text-align: center;
      font-size: 0;
    }


    /* 响应式调整 */
    @media (max-width: 1100px) {

      .wrap,
      .subwrap,
      main {
        padding: 0 12px;
      }

      .song-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .mv-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 700px) {
      .top-nav {
        display: none;
      }

      .search input {
        width: 160px;
      }

      .song-grid {
        grid-template-columns: 1fr;
      }

      .rec-grid {
        grid-template-columns: 1fr;
      }
      
      .mv-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="wrap">
      <div class="logo">
        <img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000">
      </div>

    </div>
  </header>

  <main>
    <!-- 歌单推荐 区域 -->
    <section>
      <div class="section-title">
        <h2>歌单推荐</h2>
        <div class="tabs">
          <a href="#" style="color: #27ae60;">为你推荐</a>
          <a href="#">情歌</a>
          <a href="#">网络歌曲</a>
          <a href="#">KTV热歌</a>
          <a href="#">官方歌单</a>
          <a href="#">经典</a>
        </div>
      </div>

      <div class="carousel">
        <div class="carousel-row">
          <div class="card">
            <div class="cover">
              <img
                src="https://music-file.y.qq.com/songlist/u/oicq7w4ioi6Aov/12949/d2659630f4f3e356d13ab1705fe95d2cbc77f702_2b3cc7.jpg?imageView2/4/w/300/h/300"
                height="160px">
            </div>
            <h4>2025抖音流行歌单全网最火</h4>
            <p>播放量：1184.9万</p>
          </div>
          <div class="card">
            <div class="cover">
              <img
                src="https://music-file.y.qq.com/songlist/u/oicq7K4loecqNn/10dba/c9d39233518ba34147e0cea24cdc84d0a04fe49f_1d99d4.jpg?imageView2/4/w/300/h/300"
                height="160px">
            </div>
            <h4>2025抖音爆火歌曲（持续更新）</h4>
            <p>播放量：2027.7万</p>
          </div>
          <div class="card">
            <div class="cover">
              <img
                src="https://qpic.y.qq.com/music_cover/VDgWmlZNmEibCw1GDNC61wx8Wzy59TCNNgeCQzCWpicprldej0cSSpyZXH41uc83ibp/300?n=1"
                height="160px">
            </div>
            <h4>时光电台 | 一人一首回忆</h4>
            <p>播放量：71.8万</p>
          </div>
          <div class="card">
            <div class="cover">
              <img
                src="https://music-file.y.qq.com/songlist/u/oi-i7K6kowCioz/14531/76f26767fcfe0fa87d0c3a2fc3ea8a56aa9938f7_217ae4.jpg?imageView2/4/w/300/h/300"
                height="160px">
            </div>
            <h4>爱唱歌单 | 旋律的回忆</h4>
            <p>播放量：2.7万</p>
          </div>
          <div class="card">
            <div class="cover">
              <img
                src="https://music-file.y.qq.com/songlist/u/oiEiNeSA7iCAoc/c2e7/5d0ebc6f8a94d70e77e4e51441dbf322cccae523_263e9f.jpg?imageView2/4/w/300/h/300"
                height="160px">
            </div>
            <h4>抖音热歌：好听就停不下来</h4>
            <p>播放量：1275.5万</p>
          </div>
        </div>
        <div class="carousel-dots">
          <div class="dot active"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </section>

    <!-- 新歌首发 区域 -->
    <section class="new-section">
      <div class="section-title" style="margin: 0">
        <h2>新歌首发</h2>
        <div class="tabs">
          <a href="#" style="color: #27ae60;">精选</a>
          <a href="#">内地</a>
          <a href="#">港台</a>
          <a href="#">欧美</a>
          <a href="#">韩国</a>
          <a href="#">日本</a>
        </div>
      </div>

      <div style="margin-top: 14px">
        <div class="new-controls">
          <button class="play-all"><i class="fas fa-play"></i> 播放全部</button>
        </div>

        <div class="song-grid">
          <div class="song-col">
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000000NP63s3HwpDb_2.jpg?max_age=2592000"
                alt="秋叶绿 专辑封面" />
              <div class="song-meta">
                <div class="title">秋叶绿</div>
                <div class="artist">林宥嘉</div>
              </div>
              <div class="song-duration">03:04</div>
            </div>
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M0000037plg60Zl0uB_1.jpg?max_age=2592000"
                alt="毒药《入贡云》专辑封面" />
              <div class="song-meta">
                <div class="title">毒药《入贡云》</div>
                <div class="artist">刘宁宁</div>
              </div>
              <div class="song-duration">03:47</div>
            </div>
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000001FUHj43nPMH5_1.jpg?max_age=2592000"
                alt="ME+YOU 专辑封面" />
              <div class="song-meta">
                <div class="title">ME+YOU</div>
                <div class="artist">TWICE</div>
              </div>
              <div class="song-duration">02:55</div>
            </div>
          </div>

          <div class="song-col">
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000000AImqc0jgZOu_1.jpg?max_age=2592000"
                alt="明日坐标王者荣耀 专辑封面" />
              <div class="song-meta">
                <div class="title">明日坐标王者荣耀</div>
                <div class="artist">林俊杰 / 王若琳</div>
              </div>
              <div class="song-duration">04:44</div>
            </div>
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000000vamy52laBN0_2.jpg?max_age=2592000"
                alt="气势如虹 专辑封面" />
              <div class="song-meta">
                <div class="title">气势如虹</div>
                <div class="artist">王二博</div>
              </div>
              <div class="song-duration">03:33</div>
            </div>
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000003fBqRg1wwU6Z_1.jpg?max_age=2592000"
                alt="Zoo (From Zootopia 2) 专辑封面" />
              <div class="song-meta">
                <div class="title">Zoo (From Zootopia 2)</div>
                <div class="artist">Disney / Shakira</div>
              </div>
              <div class="song-duration">03:10</div>
            </div>
          </div>

          <div class="song-col">
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000000KWD9F28Wdk1_1.jpg?max_age=2592000"
                alt="若你的世界没有我 专辑封面" />
              <div class="song-meta">
                <div class="title">若你的世界没有我</div>
                <div class="artist">倪明亮</div>
              </div>
              <div class="song-duration">04:00</div>
            </div>
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000000miL1U3f9lRo_2.jpg?max_age=2592000"
                alt="百年守护 专辑封面" />
              <div class="song-meta">
                <div class="title">百年守护</div>
                <div class="artist">成龙</div>
              </div>
              <div class="song-duration">03:47</div>
            </div>
            <div class="song-row">
              <img src="https://y.qq.com/music/photo_new/T002R300x300M000000qvhZ72oStRv_1.jpg?max_age=2592000"
                alt="回归 专辑封面" />
              <div class="song-meta">
                <div class="title">回归</div>
                <div class="artist">胡夏</div>
              </div>
              <div class="song-duration">03:51</div>
            </div>
          </div>
        </div>

        <div class="pager">
          <div class="dot active"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </section>

    <!-- MV 区域（已更新图片链接） -->
    <section class="mv-section">
      <div class="section-title" style="margin: 0;">
        <h2>MV推荐</h2>
        <div class="tabs">
          <a href="#" style="color: #27ae60;">全部</a>
          <a href="#">内地</a>
          <a href="#">港台</a>
          <a href="#">欧美</a>
          <a href="#">韩国</a>
          <a href="#">日本</a>
          <a href="#">现场</a>
          <a href="#">高清</a>
        </div>
      </div>

      <div class="new-controls">
        <button class="play-all"><i class="fas fa-play"></i> 播放全部</button>
      </div>

      <div class="mv-grid">
        <!-- 1. 张碧晨 - 梦的翅膀 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/762637/pexels-photo-762637.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="梦的翅膀 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 245.8万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">梦的翅膀</div>
            <div class="mv-artist">张碧晨</div>
          </div>
        </div>

        <!-- 2. 周杰伦 - 月光下的告白 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="月光下的告白 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 189.2万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">月光下的告白</div>
            <div class="mv-artist">周杰伦</div>
          </div>
        </div>

        <!-- 3. 陈奕迅 - 夏日回忆 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="夏日回忆 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 321.5万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">夏日回忆</div>
            <div class="mv-artist">陈奕迅</div>
          </div>
        </div>

        <!-- 4. Taylor Swift - 星光璀璨 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="星光璀璨 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 156.7万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">星光璀璨</div>
            <div class="mv-artist">Taylor Swift</div>
          </div>
        </div>

        <!-- 5. 鹿晗 - 奔跑 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="奔跑 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 98.3万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">奔跑</div>
            <div class="mv-artist">鹿晗</div>
          </div>
        </div>

        <!-- 6. 邓紫棋 - 爱情故事 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/6476666/pexels-photo-6476666.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="爱情故事 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 210.6万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">爱情故事</div>
            <div class="mv-artist">邓紫棋</div>
          </div>
        </div>

        <!-- 7. BTS - 黑夜之光 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/167092/pexels-photo-167092.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="黑夜之光 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 178.9万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">黑夜之光</div>
            <div class="mv-artist">BTS</div>
          </div>
        </div>

        <!-- 8. 李荣浩 - 海洋之心 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="https://images.pexels.com/photos/1040474/pexels-photo-1040474.jpeg?auto=compress&cs=tinysrgb&w=1280&h=720" alt="海洋之心 MV封面">
            <div class="play-count">
              <i class="fas fa-play"></i> 145.2万
            </div>
          </div>
          <div class="mv-info">
            <div class="mv-title">海洋之心</div>
            <div class="mv-artist">李荣浩</div>
          </div>
        </div>
      </div>

      <div class="pager">
        <div class="dot active"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </section>

  </main>

  <footer style="height: 60px"></footer>

  <script>
    // 简单的轮播点切换功能
    document.querySelectorAll('.dot').forEach(dot => {
      dot.addEventListener('click', function() {
        // 找到同一组中的所有点
        const siblings = this.parentElement.querySelectorAll('.dot');
        // 移除所有点的active类
        siblings.forEach(sib => sib.classList.remove('active'));
        // 给当前点击的点添加active类
        this.classList.add('active');
      });
    });
  </script>
</body>
</html>